<template>
  <div class="step-two center card">
    <h3>个人身份认证</h3>
    <h4>上传真实营业执照法人身份证件信息进行认证</h4>
    <div class="flex upload">
      <a-upload
        v-model:file-list="fileList"
        name="avatar"
        accept=".jpg,.JPG"
        list-type="picture-card"
        class="avatar-uploader flex"
        :show-upload-list="false"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :before-upload="beforeUpload"
        @change="(file) => handleChange(file, 1)"
      >
        <img
          style="width: 280px"
          v-if="idCardCopy"
          :src="idCardCopy"
          alt="avatar"
        />
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined
            :style="{ fontSize: '108px', color: '#E8ECF0' }"
            v-else
          ></plus-outlined>
          <div class="ant-upload-text">上传人像照</div>
          <div class="ant-upload-text">仅支持.JPG.格式</div>
        </div>
      </a-upload>
      <a-upload
        v-model:file-list="fileList"
        name="avatar"
        accept=".jpg,.JPG"
        list-type="picture-card"
        class="avatar-uploader flex"
        :show-upload-list="false"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :before-upload="beforeUpload"
        @change="(file) => handleChange(file, 2)"
      >
        <img
          style="width: 280px"
          v-if="idCardNational"
          :src="idCardNational"
          alt="avatar"
        />
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined
            :style="{ fontSize: '108px', color: '#E8ECF0' }"
            v-else
          ></plus-outlined>
          <div class="ant-upload-text">上传国徽照</div>
          <div class="ant-upload-text">仅支持.JPG.格式</div>
        </div>
      </a-upload>
    </div>
    <a-alert
      message="认证通过"
      style="text-align: left; border: none"
      type="success"
      show-icon
      v-if="idCardInfo.idCardCopy && idCardInfo.idCardNational"
    >
      <template #icon><CheckCircleOutlined style="color: #fff" /></template>
    </a-alert>
  </div>
  <div class="btns center">
    <a-space>
      <a-button>重置</a-button>
      <a-button type="primary" @click="handleNext">下一步</a-button>
    </a-space>
  </div>
</template>
<script setup>
import {
  PlusOutlined,
  LoadingOutlined,
  CheckCircleOutlined,
} from "@ant-design/icons-vue";
import { singleUploadsFile } from "@/api/upload";
import { distinguish } from "@/api/user";
import { ref } from "vue";
const fileList = ref([]);
const loading = ref(false);
const idCardCopy = ref("");
const idCardNational = ref("");
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const idCardInfo = ref({ idCardCopy: null, idCardNational: null });
const handleChange = (file, val) => {
  loading.value = true;
  let formData = new FormData();
  formData.append("file", file.file);
  formData.append("type", "2");
  singleUploadsFile(formData).then((res) => {
    if (res.code == 200) {
      if (val == 1) {
        idCardCopy.value = res.data;
      } else {
        idCardNational.value = res.data;
      }
      checkBusinessLicenseFn(res.data, val);
      loading.value = false;
    }
  });
};
const emits = defineEmits("handleSubmit");
const checkBusinessLicenseFn = async (data, val) => {
  const result = await distinguish({ imgUrl: data, type: val });
  if (result.code == 200) {
    if (val == 1) {
      idCardInfo.value.idCardCopy = result.data;
      idCardInfo.value.idCardCopy.imgUrl = data;
    } else {
      idCardInfo.value.idCardNational = result.data;
      idCardInfo.value.idCardNational.imgUrl = data;
    }
  }
};
const handleNext = () => {
  if (idCardInfo.value.idCardCopy && idCardInfo.value.idCardNational) {
    emits("handleSubmit", 2, idCardInfo.value);
  }
};
</script>
<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
}
:deep(.ant-alert-success) {
  background-color: #6cb02e !important;
  color: #fff;
}
</style>
